import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { Tabs } from 'antd';
import './FastFunctionDrawer.scss';
import type { TabsProps } from 'antd';
import FastOne from './tab-pane/FastOne';
import FastTwo from './tab-pane/FastTwo';
import FastThree from './tab-pane/FastThree';

const FastFunctionDrawer = () => {

    const { TabPane } = Tabs;


    const [curTabKey, setCurTabKey] = useState('1')

    const changeTabs = (activeKey) => {
        setCurTabKey(activeKey)
    }

    return (
        <div className='drawer-page-box'>
            <div className='drawer-title'>快捷键</div>
            <Tabs centered={true} tabBarGutter={85} className='fast-drawer-tabs' activeKey={curTabKey} onChange={changeTabs} >
                <TabPane tab="格式" key="1">
                    {curTabKey === '1' ? <FastOne /> : null}
                </TabPane>
                <TabPane tab="插入" key="2">
                    {curTabKey === '2' ? <FastTwo /> : null}
                </TabPane>
                <TabPane tab="编辑" key="3">
                    {curTabKey === '3' ? <FastThree /> : null}
                </TabPane>
            </Tabs>
        </div>
    )
}


export default forwardRef(FastFunctionDrawer);